/*
 * @description: 店铺信息/主体信息
 * @Author: along
 * @Date: 2021-04-12
 * @Last Modified by: along
 * @Last Modified time: --
 */
<template>
    <div class="shopSubjectInfo">
        <!-- 审核不通过原因 -->
        <div
            v-if="true"
            class="__reject"
        >
            <img
                src="@/assets/image/reject_logo.png"
                class="__reject_logo"
            >
            <p class="__reject_reson">
                审核不通过原因：巴拉巴拉的原因巴拉巴拉的原因巴拉巴拉的原因巴拉巴拉的原因巴拉巴拉的原因巴拉巴拉的原因
            </p>
        </div>

        <!-- 表单内容 -->
        <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="140px"
            class="_subject"
        >
            <p class="_title">入驻人证件信息</p>
            <div class="_el_item">
                <el-form-item
                    label="身份证件像"
                    prop="legal_id_card_image"
                    :style="{marginBottom: '45px'}"
                >
                    <div class="legal_image_wrap">
                        <el-upload
                            class="avatar-uploader-big"
                            action="upload"
                            accept="image/*"
                            list-type="picture-card"
                            :show-file-list="false"
                            :http-request="(e) => {fnUploadImage(e, 'legal_id_card_image')}"
                            :disabled="!isEdit ? true : false"
                        >
                            <div class="_card_side">
                                <div class="_card_side_bg">
                                    <img
                                        src="@/assets/image/idcard1.png"
                                        class="legal_image"
                                        v-if="!ruleForm.legal_id_card_image"
                                    >
                                    <img
                                        :src="ruleForm.legal_id_card_image"
                                        class="legal_image"
                                        v-if="ruleForm.legal_id_card_image"
                                        @mouseenter="handleMouseenter('is_legal_id_card_image')"
                                    >
                                </div>
                                <p class="_card_side_text">点击上传<span :style="{color: 'rgba(32, 160, 255, 1)'}">人面像</span></p>
                            </div>
                            <div
                                v-if="is_legal_id_card_image"
                                @mouseout="handleMouseLeaver('is_legal_id_card_image')"
                                class="legal_ad"
                            >
                                <i class="el-icon-zoom-in" @click="fnPrievimage(ruleForm.legal_id_card_image)"></i>
                                <i class="el-icon-delete" @click="ruleForm.legal_id_card_image = ''"></i>
                            </div>
                        </el-upload>
                        <el-upload
                            class="avatar-uploader-big"
                            action="upload"
                            accept="image/*"
                            list-type="picture-card"
                            :show-file-list="false"
                            :http-request="(e) => {fnUploadImage(e, 'legal_id_card_national_image')}"
                            :style="{marginLeft: '16px'}"
                            :disabled="!isEdit ? true : false"
                        >
                            <div class="_card_side">
                                <div class="_card_side_bg">
                                    <img
                                        src="@/assets/image/idcard2.png"
                                        class="legal_image"
                                        v-if="!ruleForm.legal_id_card_national_image"
                                    >
                                    <img
                                        :src="ruleForm.legal_id_card_national_image"
                                        class="legal_image"
                                        v-if="ruleForm.legal_id_card_national_image"
                                        @mouseenter="handleMouseenter('is_legal_id_card_national_image')"
                                    >
                                </div>
                                <p class="_card_side_text">点击上传<span :style="{color: 'rgba(32, 160, 255, 1)'}">国徽面</span></p>
                            </div>
                            <div
                                v-if="is_legal_id_card_national_image"
                                @mouseout="handleMouseLeaver('is_legal_id_card_national_image')"
                                class="legal_ad"
                                @click="stop"
                            >
                                <i class="el-icon-zoom-in" @click.stop="fnPrievimage(ruleForm.legal_id_card_national_image)"></i>
                                <i class="el-icon-delete" @click.stop="ruleForm.legal_id_card_national_image = ''"></i>
                            </div>
                        </el-upload>
                        <div class="legal_view" :style="{height: '136px'}">
                            <!-- <div class="legal_title">查看示例</div> -->
                            <div class="legal_content">
                                注意： <br/>
                                待定待定待定待定待定待定待定待定待定待定待定待定待定待定待定<br/>
                                待定待定待定待定待定待定待定待定待定待定待定待定待定待定待定【产品待定】<br/>
                            </div>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item
                    label="入驻人姓名"
                    prop="user_name"
                >
                    <el-input
                        v-model="ruleForm.user_name"
                        size="medium"
                        placeholder="请输入入驻人姓名"
                        maxlength="50"
                        show-word-limit
                        style="width:488px;"
                        :disabled="!isEdit ? true : false"
                    />
                </el-form-item>
                <el-form-item
                    label="入驻人身份证号"
                    prop="id_card"
                >
                    <el-input
                        v-model="ruleForm.id_card"
                        size="medium"
                        placeholder="请输入入驻人身份证号"
                        maxlength="50"
                        show-word-limit
                        style="width:488px;"
                        :disabled="!isEdit ? true : false"
                    />
                </el-form-item>
                <el-form-item
                    label="身份证有效期"
                    prop="is_id_express_time"
                >
                    <div class="_el_flex_line">
                        <el-date-picker
                            v-model="ruleForm.id_express_time"
                            type="date"
                            placeholder="选择日期"
                            style="width:372px;"
                            :disabled="is_id_express_time || !isEdit"
                        />
                        <el-checkbox
                            v-model="is_id_express_time"
                            style="margin-left: 24px"
                            :disabled="ruleForm.id_express_time || !isEdit ? true : false"
                        >长期</el-checkbox>
                    </div>
                </el-form-item>
                <el-form-item
                    label="学生证/录取通知书"
                    prop="student_id_card"
                >
                    <div class="legal_image_wrap">
                        <el-upload
                            class="avatar-uploader-small"
                            action="upload"
                            accept="image/*"
                            list-type="picture-card"
                            :show-file-list="false"
                            :http-request="(e) => {fnUploadImage(e, 'student_id_card')}"
                            :disabled="!isEdit ? true : false"
                        >
                            <div
                                v-if="!ruleForm.student_id_card"
                                class="_basic_none"
                            >
                                <img src="@/assets/image/basic_add.png" class="_basic_icon">
                                <p class="_basic_text">点击上传</p>
                            </div>
                            <img
                                :src="ruleForm.student_id_card"
                                class="legal_image"
                                v-if="ruleForm.student_id_card"
                                @mouseenter="handleMouseenter('is_student_id_card')"
                            >
                            <div
                                v-if="ruleForm.student_id_card"
                                @mouseout="handleMouseLeaver('is_student_id_card')"
                                class="legal_ad"
                                @click="stop"
                            >
                                <i class="el-icon-zoom-in" @click.stop="fnPrievimage(ruleForm.student_id_card)"></i>
                                <i class="el-icon-delete" @click.stop="ruleForm.student_id_card = ''"></i>
                            </div>
                        </el-upload>
                        <div class="legal_view2">
                            <div class="legal_title" @click="fnPrievimage(previewStudentIdCardImages, 0)">查看示例</div>
                            <div class="legal_content">
                                注意： <br/>
                                待定待定待定待定待定待定待定待定待定待定待定待定待定待定待定<br/>
                                待定待定待定待定待定待定待定待定待定待定待定待定待定待定待定【产品待定】<br/>
                            </div>
                        </div>
                    </div>
                </el-form-item>
            </div>

            <p class="_title">营业执照信息</p>
            <div class="_el_item">
                <el-form-item
                    label="是否三证合一"
                >
                    <div class="student_code_wrap">
                        <div class="student_code">
                            <el-radio
                                v-model="certificates_type"
                                :label="2"
                                :disabled="!isEdit ? true : false"
                            >统一社会信用代码</el-radio>
                        </div>
                        <div class="student_code">
                            <el-radio
                                v-model="certificates_type"
                                :label="1"
                                :disabled="!isEdit ? true : false"
                            >营业执照注册号</el-radio>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item
                    label="统一社会信用代码"
                    prop="unified_socoal_credit_code"
                    v-if="certificates_type === 2"
                >
                    <el-input
                        v-model="ruleForm.unified_socoal_credit_code"
                        size="medium"
                        placeholder="请输入92开头的18位阿拉伯数字或大写英文字母"
                        maxlength="50"
                        show-word-limit
                        style="width:488px;"
                        :disabled="!isEdit ? true : false"
                    />
                </el-form-item>
                <el-form-item
                    label="营业执照注册号"
                    prop="brand_logo_reg_no"
                    v-if="certificates_type === 1"
                >
                    <el-input
                        v-model="ruleForm.brand_logo_reg_no"
                        size="medium"
                        placeholder="请输入阿拉伯数字或大写英文字母"
                        maxlength="50"
                        show-word-limit
                        style="width:488px;"
                        :disabled="!isEdit ? true : false"
                    />
                </el-form-item>
                <el-form-item
                    label="个体工商户名称"
                    prop="company_main_name"
                >
                    <el-input
                        v-model="ruleForm.company_main_name"
                        size="medium"
                        placeholder="请输入个体工商户名称"
                        show-word-limit
                        style="width:488px;"
                        :disabled="!isEdit ? true : false"
                    />
                </el-form-item>
                <el-form-item
                    label="营业执照"
                    prop="brand_logo_reg_images"
                >
                    <div class="legal_image_wrap">
                        <el-upload
                            class="avatar-uploader-small"
                            action="upload"
                            accept="image/*"
                            list-type="picture-card"
                            :show-file-list="false"
                            :http-request="(e) => {fnUploadImage(e, 'brand_logo_reg_images')}"
                            :disabled="!isEdit ? true : false"
                        >
                            <img
                                src="//cdn.zsdx.cn/bcms/upload_image.png"
                                class="legal_image"
                                v-if="!ruleForm.brand_logo_reg_images"
                            >
                            <img
                                :src="ruleForm.brand_logo_reg_images"
                                class="legal_image"
                                v-if="ruleForm.brand_logo_reg_images"
                                @mouseenter="handleMouseenter('is_brand_logo_reg_images')"
                            >
                            <div
                                v-if="ruleForm.brand_logo_reg_images"
                                @mouseout="handleMouseLeaver('is_brand_logo_reg_images')"
                                class="legal_ad"
                                @click="stop"
                            >
                                <i class="el-icon-zoom-in" @click.stop="fnPrievimage(ruleForm.brand_logo_reg_images)"></i>
                                <i class="el-icon-delete" @click.stop="ruleForm.brand_logo_reg_images = ''"></i>
                            </div>
                        </el-upload>
                        <div
                            class="legal_view"
                            style="padding: 0"
                        >
                            <div class="legal_content" :style="{marginTop: '20px'}">
                                注意： <br/>
                                1、您上传的营业执照信息审核通过后，店铺认证就会变为个体工商户 <br/>
                                2、请提供经营者姓名和入驻人一致的个提供商户营业执照 <br/>
                                3、个体工商户只能更新自己的营业执照，不能删除
                            </div>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item
                    label="有效期截止至"
                    prop="brand_authorize_expire_time"
                >
                    <div class="_ruleForm_time">
                        <el-date-picker
                            v-model="ruleForm.brand_authorize_expire_time"
                            type="datetime"
                            placeholder="选择日期时间"
                            size="medium"
                            :style="{width: '372px', marginRight: '24px'}"
                            :disabled="is_brand_authorize_expire_time || !isEdit"
                        />
                        <el-checkbox
                            v-model="is_brand_authorize_expire_time"
                            :disabled="ruleForm.brand_authorize_expire_time || !isEdit ? true : false"
                        >长期</el-checkbox>
                    </div>
                </el-form-item>
            </div>
        </el-form>

        <!-- 底部操作 -->
        <div class="__foot">
            <el-button
                v-if="isEdit"
                size="medium"
                type="default"
                :style="{width: '120px', marginRight: '32px', borderRadius: '18px !important'}"
                @click="handleCanceData()"
            >
                取消
            </el-button>
            <el-button
                size="medium"
                type="primary"
                :style="{width: '120px', borderRadius: '18px !important'}"
                @click="handleChangeData('ruleForm')"
            >
                {{ !isEdit ? '编辑' : '保存' }}
            </el-button>
        </div>

        <!-- 资料审核 -->
        <submit-dialog
            ref="submitDialog"
            :dialog="showSubmitDialog"
            :title="''"
            :width="360"
            :center="true"
        >
            <div class="__dialog">
                <img
                    src="@/assets/image/dialog_logo.png"
                    class="__dialog_logo"
                >
                <p class="__dialog_title">
                    温馨提示
                </p>
                <p class="__dialog_content">
                    您提交的资料正在审核中，请耐心等待～
                </p>
                <p
                    class="__dialog_button"
                    @click="showSubmitDialog = false"
                >
                    知道了
                </p>
            </div>
        </submit-dialog>

        <!-- 资料审核未通过 -->
        <submit-dialog
            ref="submitDialog"
            :dialog="showRejectDialog"
            :title="''"
            :width="360"
            :center="true"
        >
            <div class="__dialog">
                <img
                    src="@/assets/image/fail.png"
                    class="__dialog_logo"
                >
                <p class="__dialog_title">
                    资料审核未通过
                </p>
                <p class="__dialog_content">
                    {{ '未通过原因未通过原因未通过原因未通过原因未通过原因...' }}
                </p>
                <div class="__dialog_foot">
                    <p
                        class="__dialog_cancel"
                        @click="showRejectDialog = false"
                    >
                        取消
                    </p>
                    <p
                        class="__dialog_next"
                        @click="() => {
                            isEdit = true;
                            showRejectDialog = false;
                        }"
                    >
                        重新提交
                    </p>
                </div>
            </div>
        </submit-dialog>

        <!-- 图片预览 -->
        <img-preview ref="preview" />
    </div>
</template>

<script>
import imgPreview from '@/components/common/img-preview';
import submitDialog from '@/components/common/dialog.vue';
export default {
    components: {
        imgPreview,
        submitDialog
    },
    data () {
        // 手持身份证照
        const validateIdCardImage = (rule, value, callback) => {
            if(!this.ruleForm.legal_id_card_image && !this.ruleForm.legal_id_card_national_image){
                callback(new Error('请上传身份证正反面照片'));
            }else if(!this.ruleForm.legal_id_card_image) {
                callback(new Error('请上传身份证正面照片'));
            }else if (!this.ruleForm.legal_id_card_national_image) {
                callback(new Error('请上传身份证反面照片'));
            }else {
                callback();
            }
        };

        // 身份证有效期
        const validateIdExpress = (rule, value, callback) => {
            if(this.is_id_express_time) {
                callback();
                return false;
            }

            if(value === null || value === '') {
                callback(new Error('请选择身份证有效期'));
            } else {
                callback();
            }
        };

        const validateStudentCode = (rule, value, callback) => {
            if(this.certificates_type === 2) {
                if(this.ruleForm.unified_socoal_credit_code) {
                    callback();
                } else {
                    callback(new Error('请填写统一社会信用代码'));
                }
                return false;
            }
            if(this.certificates_type === 1) {
                if(this.ruleForm.brand_logo_reg_no) {
                    callback();
                } else {
                    callback(new Error('请填写营业注册号'));
                }
                return false;
            }
        };

        const validateBrandExpreTime = (rule, value, callback) => {
            if(!this.is_brand_authorize_expire_time) {//非长期
                if(this.ruleForm.brand_authorize_expire_time) {
                    callback();
                } else {
                    callback(new Error('请选择到期时间'));
                }
            } else { //长期
                callback();
            }
        };

        return {
            isEdit: false,//是否是编辑状态
            showSubmitDialog: false,//提交审核资料弹窗
            showRejectDialog: false,//审核未通过弹窗
            ruleForm: {
                user_name: '德玛西亚',//入驻人姓名
                id_card: '340321199709197339',//入主任身份证号码
                id_express_time: -1,//身份证有效期
                legal_id_card_image: 'http://cdn.zsdx.cn/test/id_card1.jpeg',//身份证正面照
                legal_id_card_national_image: 'http://cdn.zsdx.cn/test/id_card2.jpeg',//身份反面照
                student_id_card: 'http://cdn.zsdx.cn/test/IMG_6754.jpg',//入驻人学生正面
                unified_socoal_credit_code: 19876374927352834,//统一社会信用码
                brand_logo_reg_no: 'z_2142342342424',//营业执照注册号
                company_main_name: '亚太科技有限技术公司',//个体工商户名称
                brand_logo_reg_images: 'http://cdn.zsdx.cn/test/IMG_6754.jpg',//营业执照
                brand_authorize_expire_time: 1620172800,//有效截止日期 -1:长期
                cert_type: 1,//1营业执照注册号 2:统一社会信用代码
                // user_name: '',//入驻人姓名
                // id_card: '',//入主任身份证号码
                // id_express_time: '',//身份证有效期
                // legal_id_card_image: '',//身份证正面照
                // legal_id_card_national_image: '',//身份反面照
                // student_id_card: '',//入驻人学生正面
                // unified_socoal_credit_code: '',//统一社会信用码
                // brand_logo_reg_no: '',//营业执照注册号
                // company_main_name: '',//个体工商户名称
                // brand_logo_reg_images: '',//营业执照
                // brand_authorize_expire_time: '',//有效截止日期 -1:长期
                // cert_type: 1,//1营业执照注册号 2:统一社会信用代码
            },
            rules: {
                legal_id_card_image: [
                    { validator: validateIdCardImage, trigger: 'blur' },
                    { required: true, trigger: 'change' }
                ],
                user_name: [
                    { required: true, message: '请输入入驻人姓名', trigger: 'change' }
                ],
                id_card: [
                    { required: true, message: '请输入入驻人身份证号', trigger: 'change' }
                ],
                id_express_time: [
                    { validator: validateIdExpress, trigger: 'blur' },
                    { required: true, trigger: 'change' }
                ],
                unified_socoal_credit_code: [
                    { validator: validateStudentCode, trigger: 'blur' },
                    { required: true, trigger: 'change' }
                ],
                brand_logo_reg_no: [
                    { validator: validateStudentCode, trigger: 'blur' },
                    { required: true, trigger: 'change' }
                ],
                company_main_name: [
                    { required: true, message: '个体工商户名称不可以为空', trigger: 'change' }
                ],
                brand_logo_reg_images: [
                    { required: true, message: '营业执照不可以为空', trigger: 'change' }
                ],
                brand_authorize_expire_time: [
                    { validator: validateBrandExpreTime, trigger: 'blur' },
                    { required: false, trigger: 'change' }
                ]
            },
            certificates_type: 2,//1营业执照注册号 2:统一社会信用代码
            is_id_express_time: false,//身份证有效期是否长期
            is_brand_authorize_expire_time: false,//有效截止日期是否长期
            previewStudentIdCardImages: [
                'http://cdn.zsdx.cn/bcms/id_card3s.png',
                'http://cdn.zsdx.cn/bcms/id_card4s.png'
            ],
            is_legal_id_card_image: false,
            is_legal_id_card_national_image: false,
            is_student_id_card: false
        };
    },
    mounted () {
        this.init();
    },
    methods: {
        /**
         * @description 初始化页面数据
         */
        init () {
            this.getInfo();
        },

        /**
         * @description 获取店铺基础数据
         */
        getInfo () {
            // 身份证有效期处理
            if(this.ruleForm.id_express_time === -1) {
                this.is_id_express_time = true;
                this.ruleForm.id_express_time = '';
            } else {
                this.$set(this.ruleForm, 'id_express_time', this.ruleForm.id_express_time * 1000);
            }

            // 有效期截止处理
            if(this.ruleForm.brand_authorize_expire_time === -1) {
                this.is_brand_authorize_expire_time = true;
                this.ruleForm.brand_authorize_expire_time = '';
            } else {
                this.$set(this.ruleForm, 'brand_authorize_expire_time', '');
            }

            this.$post('', {}, (resp) => {
                if (resp.code == 1) {
                    this.ruleForm = {
                        ...resp.data
                    };
                } else {
                    this.$notify({
                        type: 'warning',
                        title: '警告',
                        duration: 2000,
                        message: resp.msg
                    });
                }
            });
        },

        /**
         * @description 保存编辑数据
         */
        handleChangeData (formName) {
            // 进入编辑状态
            if(!this.isEdit) {
                this.isEdit = true;
                return false;
            }

            // 保存数据
            if(this.isEdit) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {

                        console.log('---ruleForm---', this.ruleForm);

                        this.showSubmitDialog = true;

                        this.$post('', {}, (resp) => {
                            if (resp.code == 1) {
                                this.isEdit = true;
                                this.getInfo();
                            } else {
                                this.$notify({
                                    type: 'warning',
                                    title: '警告',
                                    duration: 2000,
                                    message: resp.msg
                                });
                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        },

        /**
         * @description 图片上传处理
         */
        fnUploadImage(e, type) {
            let pic = new FormData();

            pic.append('image', e.file);

            this.$upload({
                url: '/EcommerceAlipay/uploadPicture',
                data: pic,
                success: resp => {
                    if (resp.code == 1) {
                        if(type == 'legal_id_card_image' || type == 'legal_id_card_national_image') {
                            this.checkIdCard(resp.data.url, resp => {
                                if(resp === 1) {
                                    this.$set(this.ruleForm, type, resp.data.url);
                                } else {
                                    return false;
                                }
                            });
                        } else {
                            this.$set(this.ruleForm, type, resp.data.url);
                        }
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '上传图片失败',
                            cneter: true
                        });
                    }
                }
            });
        },

        /**
         * @description 鼠标移入移出图片状态处理
         */
        handleMouseenter (type) {
            switch (type) {
                case 'is_legal_id_card_image':
                    this.is_legal_id_card_image = true;
                    break;
                case 'is_legal_id_card_national_image':
                    this.is_legal_id_card_national_image = true;
                    break;
                case 'is_student_id_card':
                    this.is_student_id_card = true;
                    break;
                case 'is_brand_logo_reg_images':
                    this.is_brand_logo_reg_images = true;
                    break;
                default:
                    break;
            }
        },
        handleMouseLeaver (type) {
            switch (type) {
                case 'is_legal_id_card_image':
                    this.is_legal_id_card_image = false;
                    break;
                case 'is_legal_id_card_national_image':
                    this.is_legal_id_card_national_image = false;
                    break;
                case 'is_student_id_card':
                    this.is_student_id_card = false;
                    break;
                case 'is_brand_logo_reg_images':
                    this.is_brand_logo_reg_images = false;
                    break;
                default:
                    break;
            }
        },

        /**
         * @description: 预览图片
         */
        fnPrievimage (images, index) {
            if(images && Object.prototype.toString.call(images) == '[object String]') {
                this.$refs.preview.show([
                    images
                ]);
            } else if (images && Object.prototype.toString.call(images) == '[object Array]') {
                this.$refs.preview.show(images, index);
            } else {
                this.$notify({
                    title: '提示',
                    message: '图片类型错误',
                    type: 'warning',
                    duration: 2000
                });
            }
        },

        /**
         * @description 阻止事件冒泡
         */
        stop (event) {
            event.stopPropagation();
        },

        /**
         * @description 取消编辑数据
         */
        handleCanceData () {
            this.$confirm('取消后修改的数据将不会进行保存,是否取消?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.isEdit = false;
                this.getInfo();
            });
        },
    }
};
</script>

<style lang="less" scoped>
.shopSubjectInfo {
    width: 100%;
    display: flex;
    flex: 1;
    flex-direction: column;
    // border: 1px red solid;
    .__reject {
        width: calc(100% - 48px);
        background: rgba(255, 249, 249, 1);
        box-sizing: border-box;
        padding: 12px 10px;
        display: flex;
        align-items: flex-start;
        margin-bottom: 16px;
        border-radius: 4px;
        margin-left: 24px;
        .__reject_logo {
            width: 14px;
            height: 14px;
            margin-right: 10px;
            margin-top: 4px;
        }
        .__reject_reson {
            color: rgba(255, 48, 48, 1);
            font-size: 14px;
            line-height: 23px;
        }
    }
    ._subject {
        margin: 0 24px 24px 24px;
        border: 1px rgba(238, 238, 238, 1) solid;
        background-color: rgba(251, 251, 251, 1);
        border-radius: 4px;
        box-sizing: border-box;
        padding: 12px 32px 32px 32px;
        flex: 1;
        ._title {
            height: 46px;
            border-bottom: 1px rgba(240, 242, 245, 1) solid;
            color: rgba(51, 51, 51, 1);
            font-size: 16px;
            font-weight: 500;
        }
        ._el_item {
            width: 100%;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            padding: 0 52px;
            margin-top: 24px;
            // 上传图片
            .legal_image_wrap {
                height: 100px;
                display: flex;
                align-items: center;
                ._basic_none {
                    width: 100px;
                    height: 100px;
                    border: 1px rgba(216, 216, 216, 1) solid;
                    border-radius: 4px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    ._basic_icon {
                        width: 24px;
                        height: 24px;
                        margin-bottom: 8px;
                    }
                    ._basic_text {
                        font-size: 12px;
                        color: rgba(136, 144, 156, 1);
                    }
                }
                .avatar-uploader-small {
                    width: 100px;
                    height: 100px;
                    overflow: hidden;
                    position: relative;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 4px;
                    .legal_image {
                        width: 100px;
                        height: 100px;
                        border-radius: 4px;
                    }
                    .legal_ad {
                        width: 100px;
                        height: 100px;
                        border-radius: 4px;
                        position: absolute;
                        left: 0px;
                        top: 0px;
                        z-index: 1;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background-color: rgba(0,0,0,.5);
                        i {
                            color: #ffffff;
                            font-size: 20px;
                            cursor: pointer;
                        }
                        .el-icon-delete {
                            margin-left: 16px;
                        }
                    }
                }
                .avatar-uploader-big {
                    width: 160px;
                    height: 136px;
                    overflow: hidden;
                    position: relative;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 4px;
                    ._card_side {
                        width: 160px;
                        height: 136px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        background-color: #ffffff;
                        margin-top: 14px;
                        ._card_side_bg {
                            width: 136px;
                            height: 84px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            background: url('http://cdn.zsdx.cn/wxhand/idcard_bord.png') center center no-repeat;
                            background-size: 136px 84px;
                            margin-bottom: 8px;
                            .legal_image {
                                width: 120px;
                                height: 68px;
                                border-radius: 4px;
                            }
                        }
                        ._card_side_text {
                            color: rgba(51, 51, 51, 1);
                            font-size: 14px;
                            margin-top: 8px;
                            line-height: 0px;
                        }
                    }
                    .legal_ad {
                        width: 136px;
                        height: 84px;
                        border-radius: 4px;
                        position: absolute;
                        left: 12px;
                        top: 14px;
                        z-index: 1;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background-color: rgba(0,0,0,.5);
                        i {
                            color: #ffffff;
                            font-size: 20px;
                            cursor: pointer;
                        }
                        .el-icon-delete {
                            margin-left: 16px;
                        }
                    }
                }
            }
            .legal_view {
                height: 100px;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                align-items: flex-start;
                margin-left: 24px;
                padding: 20px 0;
                box-sizing: border-box;
                .legal_title {
                    color: rgba(32, 160, 255, 1);
                    font-size: 14px;
                    text-decoration: underline;
                    line-height: 15px;
                    cursor: pointer;
                }
                .legal_content {
                    color: rgba(153, 153, 153, 1);
                    font-size: 12px;
                    line-height: 20px;
                }
            }
            .legal_view2 {
                height: 100px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: flex-start;
                margin-left: 24px;
                box-sizing: border-box;
                .legal_title {
                    color: rgba(32, 160, 255, 1);
                    font-size: 14px;
                    text-decoration: underline;
                    line-height: 15px;
                    cursor: pointer;
                }
                .legal_content {
                    color: rgba(153, 153, 153, 1);
                    font-size: 12px;
                    line-height: 20px;
                }
            }
            .student_code_wrap {
                display: flex;
                height: 36px;
                align-items: center;
                box-sizing: border-box;
                .student_code {
                    width: 236px;
                    height: 36px;
                    display: flex;
                    align-items: center;
                    border: 1px rgba(220, 223, 230, 1) solid;
                    padding-left: 20px;
                    border-radius: 4px;
                }
                .student_code:last-child {
                    margin-left: 16px;
                }
            }
            ._ruleForm_time {
                display: flex;
                align-items: center;
            }
        }
        ._el_flex_line {
            display: flex;
            flex-direction: row;
            align-items: center;
        }
    }

    .__foot {
        width: 100%;
        height: 68px;
        border-top: 1px rgba(240, 242, 245, 1) solid;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .__dialog {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .__dialog_logo {
            width: 48px;
            height: 48px;
        }
        .__dialog_title {
            color: rgba(51, 51, 51, 1);
            font-size: 16px;
            font-weight: 500;
            margin-top: 16px;
            margin-bottom: 18px;
        }
        .__dialog_content {
            color: rgba(51, 51, 51, 1);
            font-size: 14px;
            line-height: 22px;
            text-align: center;
        }
        .__dialog_foot {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 24px;
            .__dialog_cancel {
                width: 96px;
                height: 28px;
                border: 1px rgba(216, 216, 216, 1) solid;
                text-align: center;
                line-height: 28px;
                border-radius: 14px;
                color: rgba(102, 102, 102, 1);
                font-size: 14px;
                cursor: pointer;
                margin-right: 24px;
            }
            .__dialog_next {
                width: 96px;
                height: 28px;
                background: rgba(32, 160, 255, 1);
                border-radius: 14px;
                text-align: center;
                line-height: 28px;
                font-size: 14px;
                font-weight: 500;
                cursor: pointer;
                color: #ffffff;
            }
        }
        .__dialog_button {
            width: 166px;
            height: 28px;
            background: rgba(32, 160, 255, 1);
            border-radius: 14px;
            color: #ffffff;
            text-align: center;
            line-height: 28px;
            font-size: 14px;
            font-weight: 500;
            margin-top: 46px;
            cursor: pointer;
        }
    }
}
</style>

<style lang="less">
.shopSubjectInfo {
    ._el_item {
        .el-upload {
            border: none;
            width: 100px;
            height: 100px;
            border-radius: 4px;
        }
    }
    ._el_item {
        .avatar-uploader-big {
            .el-upload {
                border: none;
                width: 160px;
                height: 136px;
                border-radius: 4px;
            }
        }
    }
    ._basic_none {
        line-height: 30px;
    }
    .el-dialog__header {
        display: none;
    }
}
</style>